<template>
    <div class="product-item">
        <!-- 右上角状态标志 -->
        <span v-if="showStatus" class="status-badge">{{ goods.status === 'active' ? '销售中' : '已下架' }}</span>

        <!-- 左边的图片区域 -->
        <img :src="goods.images[0]" alt="产品图片" />

        <!-- 右边的信息区域 -->
        <ul>
            <li>
                <label>产品名：</label>
                <span>{{ goods.product_name }}</span>
                <span id="type" class="category">{{ goods.category }}</span>
            </li>
            <li>
                <label>地区：</label>
                <span>{{ goods.region }}</span>
            </li>
            <li>
                <label>单价：</label>
                <span id="price">￥{{ goods.price }}/斤</span>
            </li>
            <li>
                <label>库存/总数：</label>
                <span>{{ goods.listed_quantity }}&nbsp;斤&nbsp;/&nbsp;{{ goods.total_stock }}&nbsp;斤</span>
            </li>
            <li>
                <label>上架时间：</label>
                <span>{{ goods.created_at }}</span>
            </li>
            <li class="button-group">
                <el-button v-if="showOffShelf" class="detail-btn" @click="toggleShelf">
                    {{ goods.status === 'active' ? '下架' : '上架' }}
                </el-button>
                <el-button v-if="showDetail" class="detail-btn" @click="toDetail()">了解详情</el-button>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { defineProps, inject } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
const $axios = inject('$axios');

// 定义 props
const props = defineProps({
    goods: {
        type: Object,
        required: true
    },
    showDetail: {
        type: Boolean,
        default: true
    },
    showOffShelf: {
        type: Boolean,
        default: true
    },
    showStatus: {
        type: Boolean,
        default: true
    }
});

const router = useRouter();

// 跳转到详情页
function toDetail() {
    router.push({
        path: '/home/detail/' + props.goods.product_id,
    });
}

// 切换上下架状态
function toggleShelf() {
    if (props.goods.status === 'active') {
        // 当前状态为销售中，执行下架操作
        offShelf();
    } else {
        // 当前状态为已下架，执行上架操作
        onShelf();
    }
}

// 下架产品
function offShelf() {
    ElMessageBox.confirm(
        '确定要下架该产品吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        try {
            const response = await $axios.post('/agri_products/deactivate', {
                product_id: props.goods.product_id
            });
            if (response.data.code === 200) {
                ElMessage.success('产品下架成功');
                // 刷新页面或更新状态
                props.goods.status = 'inactive';
            } else {
                ElMessage.error(response.data.msg || '下架失败');
            }
        } catch (error) {
            ElMessage.error('下架失败，请稍后再试');
            console.error('下架产品失败:', error);
        }
    }).catch(() => {
        ElMessage.info('已取消下架操作');
    });
}

// 上架产品
function onShelf() {
    ElMessageBox.confirm(
        '确定要上架该产品吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
        }
    ).then(async () => {
        try {
            const response = await $axios.post('/agri_products/reactivate', {
                product_id: props.goods.product_id
            });
            if (response.data.code === 200) {
                ElMessage.success('产品上架成功');
                // 刷新页面或更新状态
                props.goods.status = 'active';
            } else {
                ElMessage.error(response.data.msg || '上架失败');
            }
        } catch (error) {
            ElMessage.error('上架失败，请稍后再试');
            console.error('上架产品失败:', error);
        }
    }).catch(() => {
        ElMessage.info('已取消上架操作');
    });
}
</script>

<style lang="less" scoped>
.product-item {
    position: relative; 
    display: flex;
    width: 570px;
    height: 240px;
    padding: 14px 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);

    /* 状态标志样式 */
    .status-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 5px 8px;
        border-radius: 4px;
        font-size: 12px;
        background: #e6f2ff;
        color: #319A19;
    }

    img {
        margin-top: 16px;
        width: 170px;
        height: 170px;
        background-color: white;
        object-fit: contain;
        object-position: center;
    }

    ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 350px;
        padding-left: 30px;
        margin-top: 20px;

        li {
            height: 30px;
            line-height: 30px;

            span {
                width: 200px;
                font-size: 16px;
            }

            #type {
                padding: 5px 8px;
                border-radius: 4px;
                font-size: 12px;
                background: #e8f5e9;
                color: #319A19;
            }

            #price {
                color: red;
            }
            label {
                width: 80px;
                font-size: 15px;
                color: #909399;
                margin-right: 4px;
            }

            .category {
                background-color: #61C1C2;
                color: white;
                padding: 2px 5px;
                border-radius: 3px;
                margin-left: 15px;
            }
        }

        /* 按钮组样式 */
        .button-group {
            display: flex;
            justify-content: flex-end; 
            gap: 10px; 
            width: 100%; 
        }
    }

    .detail-btn {
        width: 100px;
        height: 33px;
        background-color: #319a19d4;
        cursor: pointer;
        color: white;
        font-size: 14px;
        outline: none;
        &:hover {
            background-color: #319a1984;
            color: white;
        }
    }
}
</style>